<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<scroll-view scroll-y="true" class="Content" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentInner">

				<view class="content">

					<view class="contentItem" v-for="(item,index) in dataList">

						<view class="contentTop" v-if="item.type==0">
							<view class="contentTopLeft">
								<text class="contentTopLeftTop">{{item.title}}</text>
								<text class="contentTopLeftBottom">*</text>
							</view>

							<view class="contentTopRight">
								<input type="text" class="contentRightInput" placeholder-class="contentRightInputPlace"
									placeholder="请输入" />

							</view>
						</view>




						<view class="contentTop" v-if="item.type==1">
							<view class="contentTopLeft">
								<text class="contentTopLeftTop">{{item.title}}</text>
								<text class="contentTopLeftBottom">*</text>
							</view>

							<view class="contentTopRight">
								<text class="contentTopRightText">{{item.value}}</text>
								<image src="../../../static/bumenguanli/down_arrow.png" class="contentTopRightImg"
									mode="widthFix"></image>
							</view>
						</view>

					</view>




					<view class="contentTop1">
						<view class="contentTopLeft">
							<text class="contentTopLeftTop">请假事由</text>
							<text class="contentTopLeftBottom">*</text>
						</view>

						<view class="contentTopRight">
						</view>
					</view>

					<view class="text_area_content">
						<textarea @input="sumfontnum" maxlength="500" class="textareaContent" placeholder="请输入" />
						<view class="text_area_content_count">{{fontNum}}/500</view>
					</view>




				</view>
				<view class="loginContent">

					<button @click="loginClick()" style="color:#ffffff" class="login" type="default">{{login}}</button>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'


	export default {
		components: {
			MyNav,
			bgImage,


		},

		data() {
			return {
				title: '请假',
				isback: true,
				login: '提交',
				scrollViewHeight: 0,
				fontNum: 0,
				// 已输入的字数



				dataList: [

					{
						title: '申请人',
						value: '张三',
						type: 0
					},
					{
						title: '所属部门',
						value: '包装部',
						type: 1
					},
					{
						title: '请假类型',
						value: '病假',
						type: 1
					},
					{
						title: '开始时间',
						value: '2020-01',
						type: 1
					},
					{
						title: '结束时间',
						value: '2020-01',
						type: 1
					},
					{
						title: '请假时长(小时)',
						value: '9',
						type: 0
					},
					{
						title: '请假天数',
						value: '1',
						type: 0
					},

				]

			}
		},
		onLoad() {
			// 在其他页面或组件中访问
			const app = getApp();
			this.scrollViewHeight = app.globalData.scrollViewHeight2
		},

		methods: {

			// 限制文本框字数
			sumfontnum(e) {
				this.fontNum = e.detail.value.length;
			}
		}
	}
</script>

<style>
	.ContentInner {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
	}

	.Content {


		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;



	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 630rpx;
		height: 100rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
		margin-top: 30rpx;

		margin-bottom: 30rpx;



		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.text_area_content_count {


		font-size: 28rpx;
		width: 100%;
		height: 10%;
		display: flex;

		justify-content: flex-end;
		align-items: center;




	}

	.textareaContent {


		font-size: 28rpx;

		width: 100%;
		height: 90%;



	}

	.text_area_content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 630rpx;
		height: 200rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

		margin-bottom: 30rpx;




	}


	.contentTopRightImg {
		width: 16rpx;
		height: 9rpx;
		margin-left: 10rpx;
		margin-right: 30rpx;
	}

	.contentTopRightText {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 120rpx;
	}

	.contentTopRight {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.contentRightInputPlace {

		font-size: 28rpx;
	}

	.contentRightInput {

		display: flex;
		width: 100rpx;
	}

	.contentTopLeftBottom {
		display: flex;

		color: #FF7D58;
	}

	.contentTopLeftTop {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;
		margin-left: 30rpx;
	}

	.contentTopLeft {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentTop {
		height: 120rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: #EEEEEE 1rpx solid;


	}

	.contentTop1 {
		height: 120rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;



	}

	.contentItem {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;

	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 30rpx;
	}
</style>